<template>
  <div class="assets">
    <div class="head">
      <van-tabs
        title-active-color="#FF5507"
        title-inactive-color="#2C2B2D"
        color="#FF5507"
        @click="onClick">
        <van-tab title="进行中" name="1"></van-tab>
        <van-tab title="已结束" name="2"></van-tab>
      </van-tabs>
    </div>
    <div class="assets_main">
        <van-list
          v-if="result.length"
          v-model="loading"
          :finished="finished"
          offset="30"
          finished-text="没有更多了"
        >
            <div class="item"
              v-for="(item, index) in result"
              :key="index"
              @click="productDetail(item)"
            >
              <div class="card_header">
                <div class="header_info">
                  <div class="course_name">{{item.courseName || '--'}}</div>
                  <div class="dept_name">{{item.deptName || '--'}}</div>
                </div>
              </div>
              <div class="card_content">
                <div class="info_row">
                  <div class="info_label">学生姓名</div>
                  <div class="info_value">{{item.studentName || '--'}}</div>
                </div>
                <div class="info_row">
                  <div class="info_label">所属班级</div>
                  <div class="info_value">{{item.className || '--'}}</div>
                </div>
                <div class="time_info">
                  <div class="time_range">
                    <span class="time_label">课程时间：</span>
                    <span class="time_value">{{item.startTime || '--'}} 至 {{item.endTime || '--'}}</span>
                  </div>
                </div>
              </div>
            </div>
        </van-list>
      <div class="nodata" v-else>
        <van-empty description="暂无数据哦" />
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, Empty, PullRefresh, List } from 'vant'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Empty.name]: Empty,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List
  },
  data() {
    return {
      tab: 1,
      loading: false,
      finished: true,
      result: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    onClick(e) {
      this.tab = e
      console.log(this.tab)
      this.finished = true
      this.loading = false
      this.result = []
      this.getData()
    },
    getData() {
      let params = {
        type: this.tab
      }
      this.$http.getConductCorse(params).then(res => {
        console.log(res)
        // 接口直接返回数据数组，不需要分页处理
        this.result = res.data.result || []
        this.finished = true
        this.loading = false
      }).catch(err => {
        console.log(err, 'err')
        this.$toast(err.data.message)
      })
    },
    productDetail(item) {
      this.$router.push({
        name: 'orderDetail',
        params: {
          id: item.buyId,
          classId: item.classId
        }
      })
      // this.$router.push({name: 'product-detail', params: {id}})
    },
  }
}
</script>

<style lang="scss" scoped>
  .assets {
    color: #333;
    height: 100%;
    background: #f5f5f5;
    .head {
      width: 100%;
      background: #fff;
    }
    .assets_main {
      height: calc(100% - 44px);
      width: 100%;
      overflow: hidden;
      padding: 15px 0;
      .item:first-child {
        margin-top: 0;
      }
      .item {
        width: calc(100% - 30px);
        margin: 0 auto 15px;
        background: #fff;
        box-sizing: border-box;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
        border-radius: 12px;
        overflow: hidden;
        .card_header {
          padding: 16px 20px;
          border-bottom: 1px solid #f0f0f0;
          .header_info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .course_name {
              font-size: 18px;
              font-weight: 600;
              color: #333;
            }
            .dept_name {
              font-size: 14px;
              color: #666;
              background: #f5f5f5;
              padding: 4px 8px;
              border-radius: 4px;
            }
          }
        }
        .card_content {
          padding: 16px 20px;
          .info_row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            &:last-child {
              margin-bottom: 0;
            }
            .info_label {
              font-size: 14px;
              color: #666;
              flex-shrink: 0;
            }
            .info_value {
              font-size: 14px;
              color: #333;
              font-weight: 500;
              text-align: right;
              flex: 1;
              margin-left: 10px;
            }
          }
          .time_info {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #f0f0f0;
            .time_range {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .time_label {
                font-size: 14px;
                color: #666;
                flex-shrink: 0;
              }
              .time_value {
                font-size: 14px;
                color: #333;
                font-weight: 500;
                text-align: right;
                flex: 1;
                margin-left: 10px;
              }
            }
          }
        }
      }
      .nodata {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
<style lang="scss">
  .assets {
    .van-list {
      height: 100%;
      overflow: scroll;
    }
    .van-tab {
      font-size: 16px;
    }
  }
</style>
